<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Item - Inputs</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Item inputs</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding-vertical">
      <form onsubmit="return onSubmit(event)">
        <ion-list class="basic">
          <ion-item>
            <ion-label>Simple item</ion-label>
          </ion-item>

          <ion-item id="item" button onclick="testClick(event)">
            <ion-label>Item Button</ion-label>
          </ion-item>

          <ion-item>
            <ion-label>DateTime</ion-label>
            <ion-datetime name="date" id="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY"></ion-datetime>
          </ion-item>

          <ion-item>
            <ion-label>Select</ion-label>
            <ion-select name="select" id="select" value="n64">
              <ion-select-option value="">No Game Console</ion-select-option>
              <ion-select-option value="nes">NES</ion-select-option>
              <ion-select-option value="n64">Nintendo64</ion-select-option>
              <ion-select-option value="ps">PlayStation</ion-select-option>
              <ion-select-option value="genesis">Sega Genesis</ion-select-option>
              <ion-select-option value="saturn">Sega Saturn</ion-select-option>
              <ion-select-option value="snes">SNES</ion-select-option>
            </ion-select>
          </ion-item>

          <ion-item>
            <ion-label>Toggle</ion-label>
            <ion-toggle name="toggle" id="toggle" name="Actually" slot="end"></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Input (text)</ion-label>
            <ion-input name="input" id="text"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label>Input (placeholder)</ion-label>
            <ion-input name="input2" id="placeholder" placeholder="Placeholder"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label>Checkbox</ion-label>
            <ion-checkbox name="checkbox" id="checkbox" slot="start"></ion-checkbox>
          </ion-item>

          <ion-item>
            <ion-label>Range</ion-label>
            <ion-range name="range" id="range" value="10"></ion-range>
          </ion-item>
        </ion-list>

        <ion-button id="submit" type="submit">Submit</ion-button>
        <p id="form-result"></p>
      </form>

      <ion-list>
        <ion-list-header>
          <ion-label>
            Controls
          </ion-label>
        </ion-list-header>
        <ion-item-divider>Value Controls</ion-item-divider>

        <ion-item button onClick="toggleDisabled()" id="btnDisabled">
          Toggle Disable
        </ion-item>
        <ion-item button onClick="setSomeValue()" id="btnSomeValue">
          Set some value
        </ion-item>
        <ion-item button onClick="setEmptyValue()" id="btnEmptyValue">
          Set empty value
        </ion-item>
        <ion-item button onClick="setNullValue()" id="btnNullValue">
          Set "null" value
        </ion-item>
        <ion-item button onClick="setUndefinedValue()" id="btnUndefinedValue">
          Set "undefined" value
        </ion-item>
        <ion-item-divider>Label Controls</ion-item-divider>
        <ion-item button onClick="setLabelDefault()" id="btnLabelDefault">
          Default
        </ion-item>
        <ion-item button onClick="setLabelFloating()" id="btnLabelFloating">
          Floating
        </ion-item>
        <ion-item button onClick="setLabelStacked()" id="btnLabelStacked">
          Stacked
        </ion-item>
        <ion-item button onClick="setLabelFixed()" id="btnLabelFixed">
          Fixed
        </ion-item>
      </ion-list>

      <ion-list-header>
        <ion-label>
          Multiple inputs/clickables
        </ion-label>
      </ion-list-header>
      <ion-list class="multiple">
        <ion-item id="delayedInputItem">
          <ion-label>Delayed input</ion-label>
        </ion-item>

        <ion-item>
          <ion-label>Multiple inputs</ion-label>
          <ion-input placeholder="Input 1"></ion-input>
          <ion-input placeholder="Input 2"></ion-input>
          <ion-input placeholder="Input 3"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label>Multiple textareas</ion-label>
          <ion-textarea placeholder="Textarea 1"></ion-textarea>
          <ion-textarea placeholder="Textarea 2"></ion-textarea>
          <ion-textarea placeholder="Textarea 3"></ion-textarea>
        </ion-item>

        <ion-item>
          <ion-label>Multiple input/textareas</ion-label>
          <ion-textarea placeholder="Textarea 1"></ion-textarea>
          <ion-input placeholder="Input 2"></ion-input>
          <ion-textarea placeholder="Textarea 3"></ion-textarea>
        </ion-item>

        <ion-item>
          <ion-checkbox slot="start" id="checkbox-start"></ion-checkbox>
          <ion-label>Multiple inputs w/ cover</ion-label>
          <ion-datetime placeholder="startTime" display-format="HH:mm" id="datetime-end"></ion-datetime>
          <ion-checkbox slot="end" id="checkbox-end"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-select slot="start" placeholder="month" id="select-start">
            <ion-select-option value="1">January</ion-select-option>
            <ion-select-option value="2">February</ion-select-option>
            <ion-select-option value="3">March</ion-select-option>
          </ion-select>
          <ion-label>Input w/ clickable</ion-label>
          <ion-button slot="end" id="button-end" onclick="setButtonColorRed()">Button</ion-button>
        </ion-item>

        <ion-item>
          <ion-radio slot="start" id="radio-start"></ion-radio>
          <ion-label>Input w/ cover + input</ion-label>
          <ion-range value="45" id="range-end"></ion-range>
        </ion-item>

        <ion-item>
          <ion-range value="60" id="range-start"></ion-range>
          <ion-label>Multiple inputs w/o cover</ion-label>
          <ion-toggle id="toggle-1-end"></ion-toggle>
          <ion-toggle id="toggle-2-end"></ion-toggle>
        </ion-item>

        <ion-item button id="clickableItem">
          <ion-label>Clickable item</ion-label>
          <ion-checkbox slot="end"></ion-checkbox>
        </ion-item>

        <ion-item>
          <ion-checkbox slot="start"></ion-checkbox>
          <ion-label>Checkbox w/ disabled button</ion-label>
          <ion-button slot="end" onclick="setButtonColorRed()" disabled>Button</ion-button>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-app>

  <script>
    var ids = ['item', 'datetime', 'select', 'toggle', 'text', 'placeholder', 'checkbox', 'toggle', 'range'];
    var isDisabled = false;

    const clickableItem = document.querySelector('#clickableItem')

    clickableItem.addEventListener('click', function() {
      console.log('Clicked item', clickableItem);
      const color = clickableItem.color;
      clickableItem.color = color === undefined ? 'primary' : undefined;
    });

    const delayedInputItem = document.querySelector('#delayedInputItem');
    const delayedInput = document.createElement('ion-input');
    delayedInput.type = 'number';
    delayedInput.value = 34;

    setTimeout(() => {
      delayedInputItem.appendChild(delayedInput);
    }, 3000);

    const inputs = document.querySelectorAll('ion-input, ion-textarea');

    for (var i = 0; i < inputs.length; i++) {
      const input = inputs[i];

      input.addEventListener('ionBlur', function() {
        console.log('Listen ionBlur: fired');
      });

      input.addEventListener('ionFocus', function() {
        console.log('Listen ionFocus: fired');
      });
    }

    function toggleDisabled() {
      isDisabled = !isDisabled;
      Object.values(getInputs()).forEach(el => el.disabled = isDisabled);
    }

    function setSomeValue() {
      const {datetime, select, toggle, text, placeholder, checkbox, range} = getInputs();
      text.value = placeholder.value = 'Some text';
      toggle.checked = checkbox.checked = true;
      datetime.value = '2016-12-09';
      range.value = 20;
      select.value = 'nes';
    }

    function setEmptyValue() {
      const {datetime, select, text, placeholder, range} = getInputs();
      text.value = placeholder.value = '';
      datetime.value = '';
      range.value = 0;
      select.value = '';
    }

    function setNullValue() {
      Object.values(getInputs()).forEach(el => el.value = null);
      const {toggle, checkbox} = getInputs();
      toggle.checked = checkbox.checked = false;
    }

    function setUndefinedValue() {
      Object.values(getInputs()).forEach(el => el.value = undefined);
      const {toggle, checkbox} = getInputs();
      toggle.checked = checkbox.checked = false;
    }

    function setLabelDefault() {
      setLabelPosition(undefined);
    }

    function setLabelFixed() {
      setLabelPosition('fixed');
    }

    function setLabelFloating() {
      setLabelPosition('floating');
    }

    function setLabelStacked() {
      setLabelPosition('stacked');
    }

    function setLabelPosition(position) {
      Array.from(document.querySelectorAll('ion-list.basic ion-label'))
        .forEach(label => label.position = position);
    }

    function getInputs() {
      const elements = {};
      for (var i = 0; i < ids.length; i++) {
        elements[ids[i]] = document.getElementById(ids[i]);
      }
      return elements;
    }

    function testClick(ev) {
      console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim());
    }

    function onSubmit(ev) {
      const data = new FormData(ev.target);
      const json = {};
      data.forEach((value, key) => {
        json[key] = value;
      })
      document.getElementById('form-result').textContent = JSON.stringify(json);
      return false;
    }

    function setButtonColorRed() {
      const button = document.getElementById('button-end');
      button.style.setProperty('--background', '#ff0000');
    }

  </script>

</html>
